<!DOCTYPE html>
<html lang="en" style="font-size: 14px;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .spinner-grow {
      color: #343a40 !important;
      display: inline-block;
      vertical-align: text-bottom;
      background-color: currentColor;
      border-radius: 50%;
      opacity: 0;
      -webkit-animation: spinner-grow .75s linear infinite;
      animation: spinner-grow .75s linear infinite;
      width: 100px;
      height: 100px;
      z-index: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }

    .image-wrapper img {
      width: 100%;
    }
  </style>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <title>Filerobot Image Editor</title>
</head>
<body>

<div id="spinner" class="spinner-grow text-dark" role="status"></div>

<div id="main" class="wrapper" style="visibility: hidden;">
  <section class="home">
    <div class="container">
      <a class="logo" href="https://scaleflex.github.io/filerobot-image-editor/">Filerobot Image Editor</a>
      <div style="margin-top: 10px;">
        <a class="github-button" href="https://github.com/Scaleflex/filerobot-image-editor/subscription"
           data-icon="octicon-eye" aria-label="Watch Scaleflex/filerobot-image-editor on GitHub">Watch</a>
        <a class="github-button" href="https://github.com/Scaleflex/filerobot-image-editor" data-icon="octicon-star"
           aria-label="Star Scaleflex/filerobot-image-editor on GitHub">Star</a>
        <a class="github-button" href="https://github.com/Scaleflex/filerobot-image-editor/fork"
           data-icon="octicon-repo-forked" aria-label="Fork Scaleflex/filerobot-image-editor on GitHub">Fork</a>
        <a class="twitter-share-button btn btn-info" target="_blank"
           href="https://twitter.com/intent/tweet?text=Edit,%20resize,%20and%20filter%20any%20image&url=https://scaleflex.github.io/filerobot-image-editor/&via=filerobot&hashtags=uploader,image_resizing,image_editor,image_cropping">
          <i> </i>
          <span>Tweet</span>
        </a>
        <!--<a class="github-button" href="https://github.com/Scaleflex/filerobot-uploader/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download Scaleflex/filerobot-uploader on GitHub">Download</a>-->
      </div>
      <h1>Edit, resize, and filter any images!</h1>
      <h2>The Filerobot Image Editor is the easiest way to integrate an easy-to-use image editor in your web
        application. Integrated with few lines of code, your users will be able to apply basic transformations like
        resize, crop, rotate and various filters to any image.</h2>

      <div class="actions-wrapper">
        <!--<button id="edit-btn" class="btn btn-light btn-lg">Edit image <span class="arrow"></span></button>-->
        <a
           id="view-github-btn"
           href="https://github.com/scaleflex/filerobot-image-editor"
           class="btn btn-primary btn-lg"
           target="_blank"
        >View on GitHub</a>
<!--        <a href="https://www.producthunt.com/posts/filerobot-image-editor?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-filerobot-image-editor"-->
<!--           target="_blank"><img-->
<!--           src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=158695&theme=light"-->
<!--           alt="Filerobot Image Editor - Free image editor plugin for any web project 🖼 | Product Hunt Embed"-->
<!--           style="width: 211px; height: 44px;" width="211px" height="44px"/></a>-->
      </div>
    </div>

    <a href="https://github.com/scaleflex/filerobot-image-editor" target="_blank">
      <img
         class="fork-me-on-github"
         src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"
         alt="Fork me on GitHub">
    </a>

    <a href="https://www.filerobot.com/" class="robot-icon">
      <img
         style="width: 100%;"
         id="robot-icon"
         src="https://demo.cloudimg.io/width/800/q35.foil1/https://cdn.scaleflex.it/filerobot/assets/robot-icon-left.png"
         alt="filerobot"
      >
    </a>
  </section>

  <section class="ready-to-start features">
    <div class="container">
      <h2>Your image editor will look great everywhere</h2>
      <p>It only takes a few clicks to make your website more powerful with the Filerobot Image Editor. Get started for free
        and
        start seeing the improvements you can get from using a image/photo editor plugin today!</p>
    </div>
  </section>

  <section class="ready-to-start features demo-section">
    <div class="container" style="text-align: center">
      <h2>Try it out!</h2>
      <h4 class="thin-title">Select one of the images or upload your image</h4>

      <div id="demo-images" class="row demo-images">
        <div class="col-md-4">
          <img class="demo-img active"
               src="https://scaleflex.cloudimg.io/width/800/q60.foil1/https://cdn.scaleflex.it/demo/stephen-walker-unsplash.jpg"
               alt="stephen-walker-unsplash">
        </div>
        <div class="col-md-4">
          <img class="demo-img"
             src="https://scaleflex.cloudimg.io/width/800/q60.foil1/https://cdn.scaleflex.it/demo/spencer-davis-unsplash.jpg"
             alt="spencer-davis-unsplash">
        </div>
<!--        <div class="col-md-4">-->
<!--          <img class="demo-img active"-->
<!--               src="https://api.filerobot.com/fusqadtm/v1/get/_/0bfb5933-e69f-5290-83ad-1bd017c50000/Radisson+-+Hotel+Exterior.jpg?v=ea7997"-->
<!--               alt="stephen-walker-unsplash">-->
<!--        </div>-->
<!--        <div class="col-md-4">-->
<!--          <img class="demo-img"-->
<!--               src="https://api.filerobot.com/fusqadtm/v1/get/_/ec8dd8a2-058e-51c5-b64f-e159b0250000/Radisson+-+Hotel+Lobby+3.jpg?v=f87e9e"-->
<!--               alt="spencer-davis-unsplash">-->
<!--        </div>-->
        <div class="col-md-4">
          <img class="demo-img"
             src="https://scaleflex.cloudimg.io/width/800/q60.foil1/https://cdn.scaleflex.it/demo/joey-banks-unsplash.jpg"
             alt="rjoey-banks-unsplash">
        </div>
        <div class="col-md-4">
          <img class="demo-img"
             src="https://scaleflex.cloudimg.io/width/800/q60.foil1/https://cdn.scaleflex.it/demo/pietro-de-grandi-unsplash.jpg"
             alt="pietro-de-grandi-unsplash">
        </div>
        <div class="col-md-4">
          <img class="demo-img"
             src="https://scaleflex.cloudimg.io/width/800/q60.foil1/https://cdn.scaleflex.it/demo/pedro-lastra-unsplash.jpg"
             alt="pedro-lastra-unsplash">
        </div>
        <div class="col-md-4">
          <div class="uploader-container">
            <div class="uploader-icon"></div>
          </div>
          <button class="btn btn-dark btn-lg" onclick="uploader.open()">Upload image</button>
        </div>
        <!--<div class="col-md-3">-->
        <!--<img src="https://cdn.scaleflex.it/demo/austin-distel-unsplash.jpg" alt="austin-distel-unsplash">-->
        <!--</div>-->
        <!--<div class="col-md-3">-->
        <!--<img src="https://cdn.scaleflex.it/demo/andreas-dress-unsplash.jpg" alt="andreas-dress-unsplash">-->
        <!--</div>-->
      </div>

      <!--<button class="btn btn-light">upload your image</button>-->
    </div>
  </section>


  <!--<section class="image-wrapper">-->
  <!--<img-->
  <!--id="image"-->
  <!--src="https://cdn.scaleflex.it/filerobot/assets/filerobot-demo-2-min.jpg"-->
  <!--/>-->
  <!--</section>-->

  <section>
    <div class="container" style="text-align: center">
      <h4 class="thin-title">Select one of the implementation options:</h4>

      <div class="docs-wrapper">
        <div class="docs-container">
          <div class="docs-group">
            <h2>Download</h2>
            <p>Edit the image in the Image Editor and download the result.</p>
            <button id="edit-btn-download" class="btn btn-primary btn-lg">Edit & Download</button>
            <a href="#plugin-version-switcher" class="btn btn-primary btn-hollow btn-lg">Implementation</a>
          </div>
          <div class="docs-group">
            <h2>Upload </h2>
            <h4><small>(requires <a href="https://www.filerobot.com/en/home" target="_blank">Filerobot</a> account)</small></h4>
            <p>Upload the image in your Filerobot storage container, edit it in the Image Editor and upload the result. Deliver lightning fast over CDN.</p>
            <button id="edit-btn-upload" class="btn btn-primary btn-lg">Edit & Upload</button>
            <a href="https://github.com/scaleflex/filerobot-image-editor/tree/master/examples/js-with-filerobot" target="_blank" class="btn btn-hollow btn-primary btn-lg">Implementation</a>
          </div>
          <div class="docs-group">
            <h2>Modify</h2>
            <h4><small>(requires <a href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage</a> account)</small></h4>
            <p>Point the Image Editor to your origin image URL, edit it and deliver the result lightning fast over the Cloudimage image CDN. Limited to the Cloudimage inline transformation features.</p>
            <button id="edit-btn-modify" class="btn btn-primary btn-lg">Edit & Modify</button>
            <a href="https://github.com/scaleflex/filerobot-image-editor/tree/master/examples/js-with-cloudimage" class="btn btn-primary btn-hollow btn-lg" target="_blank">Implementation</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="container ready-to-start">
    <h2>Ready to get started?</h2>
    <p>In the implementation example below you can <strong>edit</strong> the image in the Image Editor and <strong>download</strong> the result.
      Check out the integration guides with <a title="integration of Filerobot to Image Editor" href="https://github.com/scaleflex/filerobot-image-editor/tree/master/examples/js-with-filerobot" target="_blank">Filerobot</a>
      and <a title="integration of Cloudimage to Image Editor" href="https://github.com/scaleflex/filerobot-image-editor/tree/master/examples/js-with-cloudimage" target="_blank">Cloudimage</a></p>
    <!--<p>To use the plugin, you will need a Filerobot token. Don't worry, it only takes seconds to get one by registering-->
      <!--<a-->
         <!--href="https://www.filerobot.com/en/registration_temp">here</a>. Once your token is created, you can configure-->
      <!--it as described below.-->
      <!--This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.</p>-->
  </section>

  <section class="container">
    <div class="text-center">
      <div id="plugin-version-switcher" class="plugin-version-switcher btn-group btn-toggle">
        <button id="js-btn" class="btn btn-primary">JS version</button>
        <button id="react-btn" class="btn btn-light">React version</button>
      </div>
    </div>

    <div id="react-version-box" style="display: none;">
      <div class="action-wrapper first-action">
        <p>
          Install Filerobot image editor via npm
        </p>
        <figure class="highlight">
          <pre><code class="javascript">npm i filerobot-image-editor --save</code></pre>
        </figure>
      </div>

      <div class="action-wrapper second-action">
        <p>
          Simple usage
        </p>
        <figure class="highlight">
        <pre><code class="javascript">import React, { Component } from 'react';
import { render } from 'react-dom';
import FilerobotImageEditor from 'filerobot-image-editor';


class App extends Component {
  constructor() {
    super();

    this.state = {
      isShow: false,
      imgSrc: 'https://cdn.scaleflex.it/demo/stephen-walker-unsplash.jpg'
    }
  }

  showImageEditor = () => {
    this.setState({ isShow: true });
  }

  onClose = () => {
    this.setState({ isShow: false });
  }

  render() {
    const { imgSrc, isShow } = this.state;

    return (
      &lt;div>
        &lt;h1>Filerobot Image Editor&lt;/h1>

        &lt;img src={imgSrc} onClick={this.showImageEditor} alt="example image"/>

        &lt;FilerobotImageEditor
           show={isShow}
           src={imgSrc}
           onClose={this.onClose}
        />
      &lt;/div>
    )
  }
}

render(&lt;App/>, document.getElementById('app'));</code></pre>
        </figure>
      </div>

      <div class="action-wrapper third-action">
        <p>
          …and you are done! <a href="https://github.com/scaleflex/filerobot-image-editor">See the full documentation
          here.</a>
        </p>
        <a href="https://codesandbox.io/s/k3q9vrk707" target="_blank"><img
           src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit on codesandbox"/></a>
      </div>
    </div>

    <div id="js-version-box" class="">
      <div class="action-wrapper first-action">
        <p>
          Include the following script into your project
        </p>
        <figure class="highlight">
          <pre><code class="javascript">&lt;script src="https://cdn.scaleflex.it/plugins/filerobot-image-editor/3.12.2/filerobot-image-editor.min.js"/&gt;&lt;/script&gt;</code></pre>
        </figure>
      </div>

      <div class="action-wrapper second-action">
        <p>
          Initialize Filerobot Image Editor
        </p>
        <figure class="highlight">
        <pre><code class="javascript">&lt;script/&gt;

  const ImageEditor = new FilerobotImageEditor();
...</code></pre>
        </figure>
      </div>

      <div class="action-wrapper third-action">
        <p>
          Open Filerobot Image Editor passing the image url which should be edited
        </p>
        <figure class="highlight">
        <pre><code class="javascript">...
  ImageEditor.open('https://cdn.scaleflex.it/demo/stephen-walker-unsplash.jpg');
&lt;/script&gt;</code></pre>
        </figure>
      </div>

      <div class="action-wrapper forth-action">
        <p>
          …and you're done!
          <a href="https://github.com/scaleflex/filerobot-image-editor" target="_blank">
            Visit the full documentation here.
          </a>
        </p>
        <a href="https://codesandbox.io/s/88jpkv2m09" target="_blank"><img
           src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit on codesandbox"/></a>
      </div>

    </div>


  </section>

  <section>
    <div class="container">
      <div class="roadmap-wrapper">

        <h2 class="thin-title">What’s on the Roadmap</h2>

        <div style="display: inline-block">
          <h4 class="thin-title">Features</h4>

          <div class="column">
            <ul>
              <li>
                <span class="icon done-icon"></span>
                <span class="feature">Control image brightness, contrast, exposure, and saturation</span>
              </li>
              <li>
                <span class="icon done-icon"></span>
                <span class="feature">Bright theme, plus possibility to make your custom theme</span>
              </li>
              <li>
                <span class="icon progress-icon"></span>
                <span class="feature">Easily integrate with third party libraries</span>
              </li>
              <li>
                <span class="icon progress-icon"></span>
                <span class="feature">Compress JPEG images with Optipress</span>
              </li>
              <li>
                <span class="icon empty-icon"></span>
                <span class="feature">Load file objects and dataURLs</span>
              </li>
            </ul>
          </div>
          <div class="column">
            <ul>
              <li>
                <span class="icon empty-icon"></span>
                <span class="feature">Round the corners of images</span>
              </li>
              <li>
                <span class="icon done-icon"></span>
                <span class="feature">Mirror images effect</span>
              </li>
              <li>
                <span class="icon empty-icon"></span>
                <span class="feature">New filters and effects</span>
              </li>
              <li>
                <span class="icon empty-icon"></span>
                <span class="feature">Transform input images to other image formats</span>
              </li>
              <li>
                <span class="icon empty-icon"></span>
                <span class="feature">Set to preview mode to render on top of an existing image</span>
              </li>
            </ul>
          </div>
        </div>

        <div class="column">
          <h4 class="thin-title">Adapters</h4>
          <ul>
            <li>
              <span class="icon done-icon"></span>
              <span class="feature">React</span>
            </li>
            <li>
              <span class="icon done-icon"></span>
              <span class="feature">Vanilla JS</span>
            </li>
            <li>
              <span class="icon empty-icon"></span>
              <span class="feature">Angular</span>
            </li>
            <li>
              <span class="icon empty-icon"></span>
              <span class="feature">Vue</span>
            </li>
            <li>
              <span class="icon empty-icon"></span>
              <span class="feature">Web Component</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section style="text-align: center;">
    <div class="container ready-to-start">
      <h2>Any questions?</h2>
      <p>
        Contact us at <a href="mailto:hello@filerobot.com">hello@filerobot.com</a>, our experts will be happy to help!
      </p>
    </div>
  </section>

  <footer>
    <div style="background: #fff">
      <section class="container ready-to-start filerobot-ui-family">
        <div class="row">
          <div class="col-sm-3 filerobot-ui-family-label" style="max-width: 200px; min-width: 200px;">
            <h5>Filerobot UI family:</h5>
          </div>
          <div class="col-sm-9 filerobot-ui-family-libs" style="max-width: calc(100% - 200px);">
            <ul>
              <li><a target="_blank" href="https://github.com/scaleflex/js-cloudimage-responsive">JS Cloudimage
                Responsive</a></li>
              <li><a target="_blank" href="https://github.com/scaleflex/react-cloudimage-responsive">React Cloudimage
                Responsive</a></li>
              <li><a target="_blank" href="https://github.com/scaleflex/ng-cloudimage-responsive">Angular Cloudimage
                Responsive</a></li>
              <li><a target="_blank" href="https://github.com/scaleflex/js-cloudimage-360-view">JS Cloudimage 360
                view</a></li>
              <li><a target="_blank" href="https://github.com/scaleflex/filerobot-uploader">Filerobot Uploader</a></li>
            </ul>
          </div>
        </div>
      </section>
    </div>
    <hr/>
    <div class="copyright">
      <div class="container">
        <div class="row">
          <div class="team-desc col-sm-8">
            <div>Made with ❤ in 2019 in Paris, Munich and Sofia by the <a target="_blank" href="https://www.scaleflex.it/en/home">Scaleflex</a> team, the guys behind <a
               href="https://www.cloudimage.io/en/home" target="_blank">Cloudimage.io</a>.
            </div>
            <div style="margin-top: 10px;">Powered by <a href="https://www.filerobot.com/" target="_blank">Filerobot</a>.
              All rights reserved.
            </div>
          </div>
          <div class="footer-menu col-sm-4">
            <ul>
              <li><a href="https://github.com/scaleflex/filerobot-image-editor" target="_blank">View GitHub</a></li>
              <li><a href="https://github.com/scaleflex/filerobot-image-editor/issues" target="_blank">Current
                Issues</a></li>
              <li><a href="https://github.com/scaleflex/filerobot-image-editor#table-of-contents" target="_blank">Documentation</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </footer>


  <div class="modal" id="result-modal">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <h4 class="modal-title">Your edited image</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <div class="modal-body">
          <div class="result-code-wrapper">
            <figure class="highlight">
              <pre><code id="result-link" class="javascript"></code></pre>
            </figure>
            <input type="text" id="copy-text" title="" class="hidden-input">
            <button id="copy-tooltip-btn" class="tooltip-copy copy-to-clipboard btn btn-light">
              <span class="tooltiptext" id="copy-tooltip">Copy to clipboard</span>
              <img src=""/>
            </button>
          </div>
          <div class="image-wrapper">
            <img id="result-image" src="" alt="result image after editing" class="result-image">
          </div>
        </div>

        <div class="modal-footer">
          <p>Enter your email to get in touch with our team and learn more about Filerobot</p>
          <form>
            <div class="form-row">
              <div class="input-wrapper col-auto">
                <input type="text" style="width: 100%;" class="form-control" id="subscribe-email" placeholder="enter your email">
              </div>
              <div class="col-auto">
                <button id="subscribe" class="btn btn-primary mb-2">Subscribe</button>
              </div>
            </div>
          </form>
          <p id="success-message" style="display: none;"> </p>
        </div>

      </div>
    </div>
  </div>
</div>

<script src="https://cdn.scaleflex.it/plugins/filerobot-uploader/2/filerobot-uploader.min.js"></script>
<script>
  const config = {
    filerobotUploadKey: '7cc1f659309c480cbc8a608dc6ba5f03',
    container: 'scaleflex-tests-v5a',
    dir: '/Github-Image-Editor',
    modules: ['UPLOAD', 'IMAGES_GALLERY']
  };
  const onUpload = (files) => {
    addNewImg(files)
  };
  const uploader = FilerobotUploader.init(config, onUpload);

  function addNewImg(files) {
    const demoImages = document.getElementById("demo-images");
    const images = demoImages.querySelectorAll('.demo-img');
    images.forEach(img => {
      img.classList.remove('active');
    });
    const uploaderResultImg = document.createElement('div');
    uploaderResultImg.style.backgroundImage = 'url("' + (files[0].url_permalink || files[0].url.permalink) + '")';
    uploaderResultImg.classList.add('custom-image', 'demo-img', 'active');
    const lastDemoItem = demoImages.children[demoImages.children.length-1];
    const customDemoImg = lastDemoItem.querySelector('.custom-image');
    if (customDemoImg) customDemoImg.remove();
    lastDemoItem.appendChild(uploaderResultImg);
    uploader.close();
    const  uploaderContainer = document.querySelector('.uploader-container');
    uploaderContainer.style.display = 'none';
  }
</script>
</body>
</html>
